<script setup>
import FancyButton from "../components/Slots/FancyButton.vue";
import BaseLayout from "../components/Slots/BaseLayout.vue";
import ScopeSlot from "../components/Slots/ScopeSlot.vue";
import FancyList from "../components/Slots/FancyList.vue";
import MouseTracker from "../components/Slots/MouseTracker";
import { reactive, ref } from "vue";

const contentList = reactive([
  {
    slotName: 'header',
    content: `<h1>Here might be a page title</h1>`
  },
  {
    slotName: 'main',
    content: `<p>A paragraph for the main content.</p><p>And another one.</p>`
  },
  {
    slotName: 'footer',
    content: `<p>Here's some contact info</p>`
  }
])

const url = ref('https://xxx.com')
</script>

<template>
  <div>
    <h3>插槽Slots</h3>
    <!-- 插槽内容 默认内容-->
    <FancyButton>
      提交
    </FancyButton>
    <hr />
    <h3>具名插槽</h3>
    <BaseLayout>
      <!-- v-slot:header -->
      <template #header>
        <h1>Here might be a page title</h1>
      </template>
      <!-- v-slot:main -->
      <template #main>
        <p>A paragraph for the main content.</p>
        <p>And another one.</p>
      </template>
      <!-- v-slot:footer -->
      <template #footer>
        <p>Here's some contact info</p>
      </template>
    </BaseLayout>
    <hr />
    <h3>动态插槽名</h3>
    <BaseLayout>
      <template v-for="(item,index) of contentList" :key="index" v-slot:[item.slotName]>
        <div v-html="item.content"></div>
      </template>
    </BaseLayout>
    <hr />
    <h3>作用域插槽</h3>
    <ScopeSlot v-slot="props">
      {{props.text}} - {{props.count}}
    </ScopeSlot>
    <ScopeSlot v-slot="{text,count}">
      {{text}} - {{count}}
    </ScopeSlot>
    <hr />
    <h3>高级列表组件展示</h3>
    <FancyList :api-url="url" :per-page="10">
      <template #item="{ body, username, likes }">
        <div class="item">
          <p>{{ body }}</p>
          <p class="meta">by {{ username }} | {{ likes }} likes</p>
        </div>
      </template>
    </FancyList>
    <hr />
    <h3>无渲染组件</h3>
    <MouseTracker v-slot="{x,y}">
      Mouse is at: {{ x }}, {{ y }}
    </MouseTracker>
  </div>
</template>

<style scoped>
.meta {
  font-size: 0.8em;
  color: #42b883;
}
</style>